<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>消息推送</el-breadcrumb-item>
			<el-breadcrumb-item>消息列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新建任务</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input v-model="query.case_title" placeholder="任务名称"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-select v-model="query.platform" placeholder="推送方式" clearable>
									<el-option
										:label="item.name"
										:value="item.sn"
										v-for="(item, index) in configList.platform"
										:key="index"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_120">
								<el-select v-model="query.platform_temp_id" placeholder="消息模版" clearable>
									<el-option
										:label="item.name"
										:value="item.sn"
										v-for="(item, index) in configList.platform_temp_id"
										:key="index"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="query.taskStatus" placeholder="推送状态" clearable>
									<el-option label="未处理" value="1"></el-option>
									<el-option label="已处理" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="发送开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="发送结束时间"
								>
								</el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="case_title" label="任务名称" width="150px"> </el-table-column>
						<el-table-column prop="platform" label="推送方式" width="120px"> </el-table-column>
						<el-table-column prop="send_object" label="公众号名称" width="150px"> </el-table-column>
						<el-table-column prop="platform_temp_id" label="消息模版" width="150px"> </el-table-column>
						<el-table-column prop="info" label="消息标题" min-width="250px"> </el-table-column>
						<el-table-column prop="send_count" label="数量" width="80px" align="center"> </el-table-column>
						<el-table-column prop="taskStatus" label="任务状态" width="80px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.taskStatus == '1'">未处理</span>
								<span class="text-danger" v-if="row.taskStatus == '2'">已处理</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="发送时间" width="150px"></el-table-column>
						<el-table-column label="操作" min-width="150" fixed="right">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="primary" @click="showMore(row)">查看详情</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { messageConf, fetchMessage } from '@/api/push.js'

export default {
	name: 'PushList',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			query: {
				platform_temp_id: '',
				case_title: '',
				taskStatus: '',
				platform: '',
				start_time: '',
				end_time: ''
			},
			demandList: [],
			configList: {},
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		this.fetchConfig()
		this.listData()
	},
	mounted() {},
	methods: {
		async listData() {
			try {
				let ret = await fetchMessage({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					...this.query
				})
				if (ret.list) {
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log('err:', err)
			}
		},
		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		resetDataBtn() {
			this.resetData()
			this.listData()
		},
		resetData() {
			this.pageNum = 1
			this.query = {
				platform_temp_id: '',
				case_title: '',
				taskStatus: '',
				platform: '',
				start_time: '',
				end_time: ''
			}
		},
		goToAdd(row) {
			this.$router.push('/pushadd')
		},
		async showMore(row) {
			this.$router.push({
				path: '/fetchlist',
				query: {
					id: row.id
				}
			})
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		async fetchConfig() {
			try {
				let ret = await messageConf()
				this.configList = ret
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}

.gys-style {
	font-size: 16px;
	text-align: center;
	background: #4fc5ca;
	padding: 10px 0;
	border-radius: 0px;
	color: #fff;
	position: relative;
	top: -30px;
	width: 500px;
	left: -20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}
</style>



// WEBPACK FOOTER //
// src/components/messagepush/PushList.vue